<template>
  <div class="dashboard-container">
    <div class="map-table">
      <div class="table-box">
        <branch-rank-table :list="list"
                           @row-click="rowClick"
                           max-height="500px"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import MapChart from '../components/map/MapChart.vue'
import BranchRankTable from '../components/table/BranchRankTable.vue'
import { RankedBranch } from '@/api-scp/types'
import { getBranchIssues } from '@/api-scp/dashboard'

@Component({
  name: 'BranchView',
  components: {
    MapChart,
    BranchRankTable
  }
})
export default class extends Vue {
  private list: RankedBranch[] = []
  private listLoading = true

  created() {
    this.getList()
  }

  private async getList() {
    this.listLoading = true
    this.list = await getBranchIssues()
    this.listLoading = false
  }

  private rowClick(rb: RankedBranch) {
    // this.$emit('highlight', rb)
    console.log(rb)
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  //background-color: rgb(240, 242, 245);
  position: relative;

  .map-table {
    border: 1px solid rgb(240, 242, 245);
    display: flex;

    .table-box {
      //display: inline-block;
      width: 240px;
    }
  }

}

</style>
